<template>
  <div class="katex-content" :id="'katex-content-'+index"></div>
</template>
<script>
export default {
  props: {
    katexContent: {
      type: String,
      default: ""
    },
    index: {
      type: String,
      default: ""
    }
  },
  methods: {
    refreshContent(elId, content) {
      const latex = document.getElementById(elId);
      if (latex) {
        latex.innerHTML = content;
        const render = renderMathInElement(latex, {
          delimiters: [
            { left: "$$", right: "$$", display: true },
            { left: "$", right: "$", display: false }
          ]
        });
      }
    }
  },
  mounted() {
    this.refreshContent("katex-content-" + this.index, this.katexContent);
  },
  watch: {
    katexContent: function() {
      this.refreshContent("katex-content-" + this.index, this.katexContent);
    }
  }
};
</script>
<style>
@import url("../../../../static/UEditor/themes/iframe");
.katex-display {
  display: inline-block;
  margin: 0px;
}
.katex-content p {
  margin: 0;
}
.katex-content img {
  vertical-align: middle;
}
</style>
<style scoped>
.katex-content {
  display: inline-block;
  line-height: 20px;
}
.katex-content p {
  margin: 0px;
}
</style>